<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
       <el-row class="myContent">
         <el-col :span="22">
           <h1 class="my-heading">资料商城选购</h1>
         </el-col>
         <el-col :span="2">
           <el-button style="margin-top: 5px;" icon="ShoppingCartFull" type="warning"  @click="formDialogRef.openDialog()">购物车</el-button>
         </el-col>
       </el-row>
       <el-row class="myContent" v-show="showSearch">
         <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
           <el-form-item label="资料名称" prop="dataName" >
             <el-input placeholder="请输入资料名称" v-model="state.queryForm.dataName" />
           </el-form-item>
           <el-form-item label="资料类型" prop="dataType">
             <el-select  v-model="state.queryForm.dataType" filterable multiple collapse-tags collapse-tags-tooltip  placeholder="请选择">
               <el-option v-for="item in typeList" :key="item.dataId" :label="item.name" :value="item.name"/>
             </el-select>
           </el-form-item>
           <el-form-item label="关键点" prop="keyPoint" >
             <el-input placeholder="请输入关键点" v-model="state.queryForm.keyPoint" />
           </el-form-item>
           <el-form-item>
             <el-button icon="search" type="primary" @click="getDataList">查询</el-button>
             <el-button icon="Refresh" @click="resetQuery">重置</el-button>
             <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef1.openDialog1('0')" v-auth="'train_spkZlData_add'">新 增</el-button>
           </el-form-item>
         </el-form>
       </el-row>
      <div style="overflow-y:scroll; height:100%; display: flex; flex-wrap: wrap; padding: 10px 20px;">
        <div class="box" v-for="product in state.dataList" :key="product.id">
          <el-card>
            <img v-if="product.onlyOfficeId==null" src="../../../assets/pic.png">
            <img v-if="product.onlyOfficeId" :src="officeUrl+product.onlyOfficeId">
            <div slot="header" class="clearfix">
                 <el-tooltip class="box-item" effect="light" :content="product.dataName+product.dataType" placement="bottom-end">
                   <el-text truncated>{{product.dataName}}{{product.dataType}}</el-text>
                 </el-tooltip>
              <div>
                <el-row>
                  <el-tooltip class="box-item" effect="light" :content="product.goodsDescribe" placement="bottom-end">
                    <el-text truncated>简介: {{product.goodsDescribe}}</el-text>
                  </el-tooltip>
                </el-row>
                <el-row>
                  <el-tooltip class="box-item" effect="light" :content="product.keyPoint" placement="bottom-end">
                    <el-text truncated>关键点: {{product.keyPoint}}</el-text>
                  </el-tooltip>
                </el-row>
                <el-row>
                  <el-col :span="9" style="margin-left: -5px">
                    <el-button :icon="product.state ? 'ShoppingCartFull': 'ShoppingCart'" :disabled="product.state" key="warning" type="warning" text @click="getProduct(product)">加入购物车</el-button>
                  </el-col>
                  <el-col :span="10" class="text-right" style="margin-top: 5px">
                    <el-button type="warning" size="small" @click="centerDialogVisible = true">购买</el-button>
                  </el-col>
                </el-row>
                <el-row>
<!--                  <el-col :span="4"></el-col>-->
                  <el-col :span="8">
                    <el-button icon="edit-pen" text type="primary" v-auth="'train_spkZlData_edit'" @click="formDialogRef1.openDialog1('0',product.id)">编辑</el-button>
                  </el-col>
                  <el-col :span="6">
                    <el-button icon="delete" text type="primary" v-auth="'train_spkZlData_del'" @click="handleDelete([product.id])">删除</el-button>
                  </el-col>
                </el-row>
               </div>
            </div>
          </el-card>
        </div>
      </div>
      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
    </div>

<!--     购物车  -->
    <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
    <!--     编辑、新增  -->
    <form-dialog1 ref="formDialogRef1" @refresh="getDataList(false)" />
<!--  购买弹框    -->
    <el-dialog v-model="centerDialogVisible" title="购买" width="350" align-center>
      <div style="width:70%;margin: auto auto">
        <el-row class="span1">
          <span >购买商品需线下联系</span>
        </el-row>
        <el-row class="span2">
          <span>销售:{{buyInfoList.name}}</span>
        </el-row>
        <el-row class="span2">
          <span>联系方式:{{buyInfoList.phone}}</span>
        </el-row>
        <el-row class="span2">
          <span>邮箱:{{buyInfoList.mail}}</span>
        </el-row>
        <el-row class="span2">
          <img :src="officeUrl+buyInfoList.onlyOfficeId" style="height: 180px;width: 180px">
        </el-row>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="centerDialogVisible = false">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="systemSpkZlData">
import { BasicTableProps, useTable } from "/@/hooks/table";
import { fetchList, delObjs,addShoppingCart,getDataTypeList,buyInfo } from "/@/api/train/spkZlData";
import { useMessage, useMessageBox } from "/@/hooks/message";
import { useDict } from '/@/hooks/dict';
import {ref} from "vue";
import {office} from "/@/api/train/kszlFile";
import {ElMessage} from "element-plus";

// 引入组件
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
const FormDialog1 = defineAsyncComponent(() => import('./addForm.vue'));
// 定义查询字典

// 定义变量内容
const officeUrl = ref()
const typeList = reactive([])
const formDialogRef = ref()
const formDialogRef1 = ref()
// 搜索变量
const queryRef = ref()
const buyInfoList = ref({})
const showSearch = ref(true)
const centerDialogVisible = ref(false)
// 多选变量
const selectObjs = ref([]) as any
const multiple = ref(true)

const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {
    goodsType:'0'
  },
  pageList: fetchList
})
//  table hook
const {
  getDataList,
  currentChangeHandle,
  sizeChangeHandle,
  sortChangeHandle,
  downBlobFile,
	tableStyle
} = useTable(state)
onMounted(()=>{
  office().then((res) => {
    officeUrl.value = res.data + '/downloadFile/';
  });
  getDataTypeList().then(res=>{
      Object.assign(typeList,res.data)
  })
  buyInfo().then(res=>{
    buyInfoList.value = res.data.records[0]
  })
})
// 清空搜索条件
const resetQuery = () => {
  // 清空搜索条件
  queryRef.value?.resetFields()
  // 清空多选
  selectObjs.value = []
  getDataList()
}
//加入购物车
const getProduct=(product:any)=>{
  let dataId = {dataId:product.dataId}
  product.state = true
  addShoppingCart(dataId).then(res=>{
    ElMessage({
      message: '成功加入购物车',
      type: 'success',
    })
  }).catch(error=>{
    if(error.code==1){
      ElMessage({
        message: '已重复添加购物车',
        type: 'warning',
      })
    }
  })
}
// 导出excel
const exportExcel = () => {
  downBlobFile('/train/spkZlData/export', Object.assign(state.queryForm, { ids: selectObjs }), 'spkZlData.xlsx')
}
// 多选事件
const selectionChangHandle = (objs: { id: string }[]) => {
  selectObjs.value = objs.map(({ id }) => id);
  multiple.value = !objs.length;
};
// 删除操作
const handleDelete = async (ids: string[]) => {
  try {
    await useMessageBox().confirm('此操作将永久删除');
  } catch {
    return;
  }
  try {
    await delObjs(ids);
    getDataList();
    useMessage().success('删除成功');
  } catch (err: any) {
    useMessage().error(err.msg);
  }
};
</script>
<style lang="scss" scoped>
  .myContent{
    margin: 10px 20px;
  }
  .my-heading {
    color: black;
    font-weight: bold;
    font-size: 26px;
    margin-bottom: 10px;
  }
  .box{
    margin: 0px 20px 20px 0;
    width: 18%;
  }
  .span1{
    font-weight: bold;
    font-size: 16px;
    color: red;
    margin-bottom: 10px;
  }
  .span2{
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
  }
  .el-card{
    height: 350px;
    position: relative;
  }
  .clearfix{
    height: 130px;
    width: 237px;
    position: absolute;
    bottom:10px
  }
img{
  height: 180px;
  margin: 0 auto;
}
</style>